<script setup>
import { ref, watch } from 'vue';
import * as echarts from 'echarts/core';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

import { onMounted } from 'vue';
import { spotsInfoStore } from "@/stores/spots";
let spotsStore = spotsInfoStore();
let chartDom = ref(null);
let myChart = null;

const updateChart = () => {
    const info = [];
    for (const [key, value] of spotsStore.spot) {
        info.push({ value, name: key });
    }
    let option = {
        title: {
            text: `${spotsStore.cityname + "景点分类"}`,
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '景点分类',
                type: 'pie',
                radius: ['10%', '80%'],
                center: ['50%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 25,
                        fontWeight: 'bold'
                    },
                },
                labelLine: {
                    show: false
                },
                data: info,
            }
        ]
    };
    myChart.setOption(option);
};

onMounted(() => {
    chartDom.value = document.getElementById('main');
    myChart = echarts.init(chartDom.value);
    updateChart();
});

watch(() => spotsStore.spot, () => {
    updateChart();
    // console.log(spotsStore.spot);
}, { deep: true });
</script>

<template>
    <div id="main" ref="chartDom"></div>
</template>

<style lang="scss" scoped>
#main {
    width: 100%;
    height: 100%;
}
</style>